<template>
  <div>导航守卫</div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  name: 'NavigationGuard',
  // 路由组件改变且该组件的路由被验证前触发，不能访问this，因为此时组件实例还未创建
  beforeRouteEnter(to, from, next) {
    console.log('⑤组件内部的beforeRouteEnter守卫');
    next(vm => {
      // next内通过回调函数形参vm访问组件实例
      console.log('⑧组件内部的beforeRouteEnter守卫的next回调函数');
    });
  },
  // 路由组件不变但路由URL的参数改变时触发，可访问this
  beforeRouteUpdate(to, from) {
    console.log('③组件内部的beforeRouteUpdate守卫');
  },
  // 离开路由组件时触发，返回false可取消离开，可访问this
  beforeRouteLeave(to, from) {
    console.log('①组件内部的beforeRouteLeave守卫');
    return false;
  },

  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  },
});
</script>

<style scoped>

</style>